<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/pulic.css">
    <style>
/* 
CSS书写规则
    先全局，再局部。
    先上后下。

1. 通配选择器，最简单粗暴的选择器
    CSS重置 normalize.css
    历史上最简单的一种重置，现在一般不用。
    *{
        padding: 0;
        margin: 0;
    }
    重置CSS盒模型
    *,
    *::before,
    *::after{
        box-sizing: border-box;
    }
2. 类型选择器，通过元素标签找见元素。
    可以找见选择区域内所有该标签元素，为了避免排他，一般需要限定选择区域
3. id选择器，通过ID找见元素。正常情况结果是一个元素。
4. class选择器，通过class找见元素，结果是符合条件的一类元素。 
*/
    #top{
        border: 1px solid #000;
    }
    header a{
        text-decoration: underline;
    }
    </style>
</head>
<body>
    <!-- 
        w3c css
        mdn css
        css.doyoe.com
        选择器（符） selector
            统配符选择器
            类型选择器
            id选择器
            class选择器
            属性选择器
            伪类选择器
            伪对象选择器
        选择器的组合
            并列           E,F{}
            利用关系组合
                后代关系   E F{}
                父子关系   E>F{}
     -->
     <header id="top">
        <h1>的打法00</h1>
        <p>的点点滴滴多</p>
        <ul class="menu">
            <li><a href="#">dddd</a></li>
            <li><a href="#">dddd</a></li>
            <li><a href="#">dddd</a></li>
            <li><a href="#">dddd</a></li>
        </ul>
     </header>
     <h1>ddddddd</h1>
     <h1>asdfasdfasdfasdfasdfasdf</h1>
</body>
</html>